<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="60vw"
      append-to-body
      class="xqLog"
    >
      <div style="width: 100%; height: 100%; display: flex; overflow-y: auto">
        <el-descriptions
          style="width: calc(100% - 30%)"
          title=""
          :column="2"
          border
        >
          <el-descriptions-item
            v-for="(item, i) in objConList"
            :key="i"
            :span="item.span"
            labelStyle="width: 120px;color:#000"
            contentStyle="width:200px"
          >
            <template slot="label">
              <!-- <i class="el-icon-user"></i> -->
              {{ item.label }}
            </template>
            <div>
              <!-- // getDataCope(this[item.list]?this[item.list]:dict.type[item.list], form[item.code]) -->
              <span v-if="item.list">{{
                getDataCope(item.list, form[item.code], "value", "label")
              }}</span>
              <span v-else>{{ form[item.code] ? form[item.code] : "--" }}</span>
              <span>{{ item.units }}</span>
            </div>
          </el-descriptions-item>
        </el-descriptions>
        <div style="width: 30%; height: 100%">
          <img
            src="@/assets/hb_img/bj/img_number@2x.png"
            alt=""
            style="width: 100%"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  //变量
  data() {
    return {
      open: false,
      form: {},
      objConList: [
        { label: "航标名称", code: "markName", units: "", span: "2" },
        { label: "所属航道", code: "channel", units: "", span: "1" },
        {
          label: "岸别",
          code: "bankSide",
          units: "",
          span: "1",
          list: [],
        },
        { label: "航标类型", code: "markType", units: "", span: "1" },
        { label: "设标地点", code: "location", units: "", span: "1" },
        { label: "管养单位", code: "managementUnit", units: "", span: "1" },
        { label: "设置方式", code: "setupMethod", units: "", span: "1" },
        { label: "设标水深", code: "setupDepth", units: "", span: "1" },
        { label: "安全距离", code: "safeDistance", units: "", span: "1" },
        { label: "标体颜色", code: "markColor", units: "", span: "1" },
        { label: "航标高度", code: "markHeight", units: "", span: "1" },
        { label: "标体形状", code: "markShape", units: "", span: "1" },
        { label: "标题材质", code: "markMaterial", units: "", span: "1" },
        { label: "航标坐标", code: "xxx", units: "", span: "1" },
        { label: "锚链长度(浮标)", code: "chainLength", units: "", span: "1" },
        { label: "是否发光", code: "isLuminous", units: "", span: "1" },
        { label: "是否遥测遥控", code: "isRemoteMonitor", units: "", span: "1" },
        { label: "仪器", code: "instrumentType", units: "", span: "1" },
        { label: "灯光功率", code: "lightPower", units: "", span: "1" },
        { label: "额定电压", code: "ratedVoltage", units: "", span: "1" },
        { label: "透镜", code: "lens", units: "", span: "1" },
        { label: "光色", code: "lightColor", units: "", span: "1" },
        { label: "闪光", code: "flashType", units: "", span: "1" },
        { label: "灯光视距", code: "lightVisualRange", units: "", span: "1" },
        { label: "航标视距", code: "markVisualRange", units: "", span: "1" },
        { label: "灯光能源", code: "lightEnergySource", units: "", span: "1" },
        { label: "电池类别", code: "batteryType", units: "", span: "1" },
        { label: "电池容量", code: "batteryCapacity", units: "", span: "2" },
        { label: "设标时间", code: "setupTime", units: "", span: "1" },
        { label: "最近改造时间", code: "latestModifyTime", units: "", span: "1" },
        { label: "遥测号码", code: "remoteMonitorNumber", units: "", span: "2" },
      ],
    };
  },
  //初始
  mounted() {},
  //事件
  methods: {
    getInit(data) {
      this.open = true;
      this.form = {
        ...data,
        location: [data.zdGpsLon, data.zdGpsLat],
        locationS: `${data.zdGpsLon},${data.zdGpsLat}`,
      };
      console.log(this.form,'this.form');
      
    },
    getDataCope(data = [], status, tyName = "id", fhName = "name") {
      if (status == null) {
        return;
      }
      let name = [];
      if (typeof status == "object") {
        //参数为数组的情况
        let objList = status;
        data.forEach((item) => {
          objList.forEach((s) => {
            if (item[tyName] == s) {
              name.push(item[fhName]);
            }
          });
        });
      } else if (typeof status == "string" && status.indexOf(",") > 0) {
        //参数为字符串‘，’号分割
        let objList = status;
        if (status.indexOf(",") > 0) {
          objList = status.split(",");
        }
        data.forEach((item) => {
          objList.forEach((s) => {
            if (item[tyName] == s) {
              name.push(item[fhName]);
            }
          });
        });
      } else {
        data.forEach((item) => {
          if (item[tyName] == status) {
            name.push(item[fhName]);
          }
        });
      }
      return name.join(",");
    },
  },
  //销毁
  beforeDestroy() {},
};
</script>
<style scoped>
.xqLog ::v-deep .el-dialog__header {
  background: rgba(0, 0, 0, 0.02) !important;
}

.xqLog ::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
</style>
